<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .fenye{
        width: 100%;
        height: 50px;
        background-color: #0f0;
    }
</style>
<body>
<div class="fenye"></div>
</body>
<script src="./a.js"></script>
<script>
new Page('fenye',{
    //想用什么语言，英文中午还是字母符号
    language:{
        //在js里面创建div，放上这些内容就行了
        first:'|<<',
        prev:'<<',
        next:'>>',
        last:'>>|'
    },
    pageData:{
        total:100,//总共多少条数据
        pageSize:10,
    },
    show:function(currentPage){
        console.log('当前是第'+currentPage+'页')
        //这里用来截取数据
    }
})


//示范
var ul = document.querySelector('ul')
var arr = null
$.ajax({
    url: 'https://list.mogu.com/search',
    data: {
        _version: 8193,
        ratio: '3:4',
        cKey: 15,
        page: 1,
        sort: 'pop',
        ad: 0,
        fcid: 50330,
        action: 'shoes',
        acm: '3.mce.1_10_1ko50.132244.0.qTQe3sN71WM5Y.pos_874-m_482174-sd_119',
        ptp: '31.v5mL0b._head.0.v1gxuUZa',
        _: +new Date()
    },
    dataType: 'jsonp',
    success:res=>{
        arr = res.result.wall.docs;
        new Page('myPagination',{
            pageData: {
                total: arr.length,
                pageSize: 8
            },
            show:function(currentPage){
                var data = arr.slice((currentPage-1)*8, currentPage*8)
                var str = '';
                data.forEach(item=>{
                    str += `
                        <li>
                            <img src="${item.img}" width="250" height="300" />
                            <div><b>${item.title}</b></div>
                            <span>价格：￥${item.price}元</span>
                        </li>
                    `
                })
                ul.innerHTML = str
            }
        })
        
        // $(".myPagination").Pagination({
        //     page:1,
        //     count:arr.length,
        //     limit: 8,
        //     groups: 5,
        //     onPageChange:function (page) {
        //         console.log("当前是:" + page);
        //         var data = arr.slice((page-1)*8, page*8)
        //         var str = '';
        //         data.forEach(item=>{
        //             str += `
        //                 <li>
        //                     <img src="${item.img}" width="250" height="300" />
        //                     <div><b>${item.title}</b></div>
        //                     <span>价格：￥${item.price}元</span>
        //                 </li>
        //             `
        //         })
        //         ul.innerHTML = str
        //     }
        // });
    }
})
</script>
</html>